<template>
  <div>
    <el-row :gutter="15">
      <el-col :span="6">
        <el-page-header @back="goBack" content="教室列表">
          <template slot="title">
            <el-link type="primary">返回首页</el-link>
          </template>
        </el-page-header>
      </el-col>
      <el-col :span="4" :offset="4">
        <el-select
          clearable
          class="selectBuilding"
          v-model="queryCondition.building"
          placeholder="教学楼"
        >
          <el-option
            v-for="item in buildingOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select clearable v-model="queryCondition.type" placeholder="教室类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="queryCondition.key"
          @keyup.enter.native="searchClassroom"
          placeholder="教室名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      <el-col :span="1">
        <el-button
          @click="searchClassroom"
          class="toSearch"
          size="medium"
          type="primary"
          icon="el-icon-search"
        ></el-button>
      </el-col>
    </el-row>

    <div class="content-box">
      <el-card class="box-card" shadow="hover" v-for="(item,index) in roomList" :key="index">
        <div class="classroomName">
          <el-link @click="toClassroomDetail(item.classroomName)">
            <h3 v-text="item.classroomName"></h3>
          </el-link>

          <div class="classroomType">
            教学楼:
            <el-tag v-text="item.building"></el-tag>
          </div>
          <div>
            容量:
            <el-tag v-if="item.type==0">30人</el-tag>
            <el-tag type="warning" v-else-if="item.type==1">50人</el-tag>
            <el-tag type="error" v-else="item.type==2">90人</el-tag>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 40, 60]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roomList: [],
      currentPage: 1,
      pageSize: 8,
      total: 10,
      queryCondition: { type: "", building: "", key: "" },
      typeOptions: [
        {
          value: "0",
          label: "小型"
        },
        {
          value: "1",
          label: "中型"
        },
        {
          value: "2",
          label: "大型"
        }
      ],
      buildingOptions: [
        {
          value: "A",
          label: "教学楼A"
        },
        {
          value: "B",
          label: "教学楼B"
        },
        {
          value: "C",
          label: "教学楼C"
        },
        {
          value: "D",
          label: "教学楼D"
        }
      ]
    };
  },
  methods: {
    goBack() {
      this.$router.push("/welcome");
    },
    handleCurrentChange(page) {
      this.$http
        .get("/classroom/noAuthorize/queryByPage", {
          params: { page: page, limit: this.pageSize }
        })
        .then(resp => {
          let { code, data, msg } = resp.data;
          if (code == 1) {
            let pageData = resp.data.data.pageResult;
            this.total = pageData.totalCount;
            this.roomList = pageData.list;
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    },
    getClassroomList() {
      this.$http
        .get("classroom/noAuthorize/queryByPage", {
          params: { page: this.currentPage, limit: this.pageSize }
        })
        .then(resp => {
          let { code, data, msg } = resp.data;
          if (code == 1) {
            let pageData = resp.data.data.pageResult;
            this.total = pageData.totalCount;
            this.roomList = pageData.list;
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    },

    searchClassroom() {
      this.$http
        .get("classroom/noAuthorize/queryByPage", {
          params: {
            page: this.currentPage,
            limit: this.pageSize,
            building: this.queryCondition.building,
            type: this.queryCondition.type,
            key: this.queryCondition.key
          }
        })
        .then(resp => {
          let { code, data, msg } = resp.data;
          if (code == 1) {
            let pageData = resp.data.data.pageResult;
            this.total = pageData.totalCount;
            this.roomList = pageData.list;
          } else if (code == 404) {
            this.$message.warning(msg);
          }
        })
        .catch(resp => {});
    },
    toClassroomDetail(name) {
      this.$router.push("/classroomDetails?name=" + name);
    }
  },
  created() {
    this.getClassroomList();
  }
};
</script>

<style scoped lang='less'>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  box-shadow: 10px 10px 5px #888888;
  border-radius: 30px;
  width: 160px;
  height: 160px;
  float: left;
  margin: 20px;
}
.content-box {
  width: 880px;
  margin-left: 90px;
}
.el-pagination {
  margin-top: 450px;
  margin-left: 330px;
}
.classroomType {
  margin-bottom: 5px;
}
.classroomName {
  margin-left: 20px;
}
.el-row {
  margin-top: 20px;
  margin-bottom: 10px;
}
.toSearch {
  margin-top: 2px;
}
</style>